﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Binding List</title>
    <script type="text/javascript" src="../lib/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="../lib/dumpobj.js"></script>
    <script type="text/javascript" src="../lib/jQXB.1.1.js"></script>
</head>
<body>
<div>
	<table>	
		<tr>
			<td>SKU</td>
			<td><input type="text" jqxb-datasource="product" jqxb-datamember="sku"/></td>		
		</tr>
		<tr>
			<td>DESCRIPTION</td>
			<td><input type="text" jqxb-datasource="product" jqxb-datamember="description"/></td>		
		</tr>
		<tr>
			<td>COLOUR</td>
			<td><select jqxb-datasource="product" jqxb-datamember="colour" jqxb-listsource="colourslist" jqxb-listvalue="id" jqxb-listtext="description"></select></td>		
		</tr>
		<tr>
			<td valign="top">OPTIONS</td>
			<td><select multiple="multiple" jqxb-datasource="product" jqxb-datamember="options" jqxb-listsource="optionslist" jqxb-listvalue="id" jqxb-listtext="value"></select></td>		
		</tr>
		<tr>
			<td valign="top">AVAILABLE</td>
			<td><input type="checkbox" jqxb-datasource="product" jqxb-datamember="available" jqxb-bindedattribute="checked"></select></td>		
		</tr>
	</table>
	<input type="button" value="Show Changes" onclick="alert(jQXB.diags.dumpobj(jQXB.getDataSource('product'),'PRODUCT','->'));">

</div>
<script type="text/javascript">
	var viewModel = {
			"colours": [{"id": 1,"description": "Red"},{"id": 2,"description": "Blue"},{"id": 3,"description": "White"}],
			"options": [{"id": 1,"value":"skin"},{"id":2,"value":"bottle"},{"id":3,"value":"6 march"}],
			
			"data": {"sku": "109-106","description": "bycicle","options":[1,3],"colour":3,"available":true}
			};
    jQuery(document).ready(function () {
        jQXB.initialize();
		//jQXB.setDataSource("colourslist",viewModel.colours).doBind("colourslist");
		//jQXB.setDataSource("optionslist",viewModel.options).doBind("optionslist");
        //jQXB.setDataSource("product", viewModel.data).doBind("product");
		jQXB.setDataSource("colourslist",viewModel.colours).setDataSource("optionslist",viewModel.options).
			setDataSource("product", viewModel.data).doBind();
		
    });
</script>
</body>
</html>
